<template>
  <div class="main-course">
    <div class="page-course">
      <div class="course-header">
        <div class="page-course-header">
        <div class="header-left"><span>课程</span></div>
        <div class="header-right">
          <router-link to="/message">
            <van-badge dot>
              <van-icon name="bell" />
            </van-badge>
          </router-link>
        </div>
      </div>
      <span class="txt-time">{{dayjs().format("YYYY.MM")}}</span>
      <div class="body-time">
          <van-tabs v-model:active="active">
          <van-tab title="全部"></van-tab>
          <van-tab title="前端开发" ></van-tab>
          <van-tab title="后端开发" ></van-tab>
          <van-tab title="移动开发"></van-tab>
          <van-tab title="更多"></van-tab>
        </van-tabs>
        </div>
      </div>
      <div class="page-course-body">
        <div class="body-header"></div>
        <div>
          <template v-for="item in list" :key="item.id">
              <a :href="item.share">
                <div class="course-title">
                  <img src="./image/784fe821ff4cd9ae5e28a62e86e30a43.png" />
                  <div class="course-text">
                    <span class="span-txt">{{ item.name }}</span>
                    <p>
                      {{ item.level }}&emsp;
                      <van-icon name="user-o" />
                      {{item.numbers}}
                    </p>
                  </div>
                </div>
              </a>
            </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: "course" };
</script>
<script setup>
import { onMounted, ref } from "vue";
import { getCourseList } from "../../api/course";
import dayjs from "dayjs";
const time = 30 * 60 * 60 * 1000;
const active = ref(0);
let list = ref([]);
function fetchData(){
  getCourseList()
    .then((response) => {
      const {
        data: { courselist },
      } = response;
      list.value.push(...courselist);
    })
    .catch((err) => {
      console.log(err);
    })
    .finally(() => {});
}

onMounted(() => {
 fetchData()
});
</script>
<style lang="scss" scoped>
.main-course {
  height: 100%;
  overflow: hidden;
}
.page-course {
  height: 100%;
  display: flex;
  flex-direction: column;
  .course-header{
    position: fixed;
    background-color: #fff;
    width: 100%;
    border:1px solid #fff;
    z-index: 1;
  }
  &-header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .header-left,
    .header-right {
      margin: 20px;
    }
  }
  .txt-time{
    margin-left: 20px;
  }
  &-body {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow: auto;
    .body-header{
      height: 140px;
    }
  }
  .body-time {
    margin:0 10px 10px 0;
  }
  .course-title {
    height: 100px;
    width: 100%;
    margin: 10px;
    overflow: hidden;
    display: flex;
    color: #000;
    font-size: 12px;
    img {
      height: 100px;
      width: 80px;
    }
    .course-text {
      flex: 1;
      margin: 10px;
      overflow: hidden;
      .span-txt {
        font-weight: bold;
        font-size: 20px;
      }
    }
  }
}
</style>
